{extend name="common/main"/}
{block name="style"}
    <link rel="stylesheet" href="__ZUI__/lib/datetimepicker/datetimepicker.min.css">
{/block}
{block name="script"}
    <!-- ChartJS 1.0.1 -->
    <script src="__ZUI__/lib/chart/zui.chart.min.js"></script>
    <!-- daterange picker -->
    <script src="__ZUI__/lib/datetimepicker/datetimepicker.min.js"></script>

    <script>
        $(function () {
            var activeList = {$activeList};

            var data = {
                // labels 数据包含依次在X轴上显示的文本标签
                labels: activeList.labels,
                datasets: [{
                    // 数据集名称，会在图例中显示
                    label: "按天",
                    // 颜色主题，可以是'#fff'、'rgb(255,0,0)'、'rgba(255,0,0,0.85)'、'red' 或 ZUI配色表中的颜色名称
                    // 或者指定为 'random' 来使用一个随机的颜色主题
                    //color: "red",
                    // 也可以不指定颜色主题，使用下面的值来分别应用颜色设置，这些值会覆盖color生成的主题颜色设置
                     fillColor: "rgba(23,182,200,0.2)",
                     strokeColor: "rgba(23,182,200,1)",
                     pointColor: "rgba(23,182,200,1)",
                     pointStrokeColor: "#fff",
                     pointHighlightFill: "#fff",
                     pointHighlightStroke: "rgba(220,220,220,1)",

                    // 数据集
                    data: activeList.datas.num
                }]
            };

            var options = {
            ///Boolean - 是否在图表上显示网格
            scaleShowGridLines : true,
            //String - 网格线条颜色
            scaleGridLineColor : "rgba(0,0,0,.05)",
            //Number - 网格宽度
            scaleGridLineWidth : 1,
            //Boolean - 是否显示水平坐标，即X轴
            scaleShowHorizontalLines: true,
            //Boolean - 是否显示垂直坐标，即Y轴
            scaleShowVerticalLines: true,
            //Boolean - 是否显示为平滑曲线
            bezierCurve : true,
            //Number - 平滑曲线时所使用的贝塞尔曲线参数
            bezierCurveTension : 0.4,
            //Boolean - 是否显示顶点
            pointDot : true,
            //Number - 顶点半径，单位像素
            pointDotRadius : 4,
            //Number - 顶点描边线条宽度，单位像素
            pointDotStrokeWidth : 1,
            //Number - 检测鼠标点击所使用依据的半径大小，单位像素
            pointHitDetectionRadius : 20,
            //Boolean - 是否
            datasetStroke : true,
            //Number - 数据集线条宽度，单位为像素
            datasetStrokeWidth : 2,
            //Boolean - 是否用颜色来填充数据集
            datasetFill : true,
            }; // 图表配置项，可以留空来使用默认的配置

            var myLineChart = $("#activeChart").lineChart(data,options);

            var setLineChartData=function(msg){
                    data = {
                    labels: msg.labels,
                    datasets: [{
                    // 数据集名称，会在图例中显示
                    label: "按天",
                    // 颜色主题，可以是'#fff'、'rgb(255,0,0)'、'rgba(255,0,0,0.85)'、'red' 或 ZUI配色表中的颜色名称
                    // 或者指定为 'random' 来使用一个随机的颜色主题
                    //color: "red",
                    // 也可以不指定颜色主题，使用下面的值来分别应用颜色设置，这些值会覆盖color生成的主题颜色设置
                     fillColor: "rgba(23,182,200,0.2)",
                     strokeColor: "rgba(23,182,200,1)",
                     pointColor: "rgba(23,182,200,1)",
                     pointStrokeColor: "#fff",
                     pointHighlightFill: "#fff",
                     pointHighlightStroke: "rgba(220,220,220,1)",

                    // 数据集
                    data: msg.datas.num
                    }]
                };
            }
            var refreshLineChart=function(){
                $("#activeChart").remove();
                $('.chart-box').append('<canvas id="activeChart" style="width:100%;height:450px"></canvas>');
                var myLineChart = $("#activeChart").lineChart(data,options);
            }

            //选择显示的时间
            var startDate="{$options.startDate}",//开始时间
                endDate="{$options.endDate}";//结束时间

            var type="{$type}";
            
            $('[name="type_show"]').click(function(){
                type=$(this).val();
                $.post("{:url()}", {type:type,startDate:startDate,endDate:endDate}, function (msg) {
                    console.log(msg);
                    if(msg.status==1){
                        //console.log(msg);
                        setLineChartData(msg);
                        refreshLineChart();
                    }else{
                        handleAjax(msg);
                    }
                });
            });

            $('#reservation').datetimepicker({
                locale:{
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '开始',
                    toLabel: '结束',
                    daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
                },
                format: 'YYYY-MM-DD',
                startDate:startDate,
                endDate:endDate,
                maxDate:endDate
            });

            $('#reservation').on('apply.daterangepicker',function(ev, picker) {
                $.post("{:url()}", {type:type,startDate:picker.startDate.format('YYYY-MM-DD'),endDate:picker.endDate.format('YYYY-MM-DD')}, function (msg) {
                    if(msg.status==1){
                        startDate=picker.startDate.format('YYYY-MM-DD');
                        endDate=picker.endDate.format('YYYY-MM-DD');
                        setLineChartData(msg);
                        refreshLineChart();
                    }else{
                        handleAjax(msg);
                    }
                });
            });
        });
    </script>
{/block}
{block name="body"}
    
    <div class="main-title">
        <h2>活跃用户统计</h2>
    </div>
    {include file="count/_top_nav"/}

    <div class="clearfix with-padding">
        <!-- LINE CHART -->
        <div class="box box-info">
            <div class="box-header with-border">
                <div class="box-tools pull-right">
                    <button type="button" class="btn" data-remote="{:url('Count/setActiveAction')}" data-toggle="modal">
                        <i class="icon icon-cog"></i> 设置
                    </button>
                </div>
            </div>
            <div class="box-body">
                <div class="clearfix">
                    <div class="checkbox_block pull-left">
                        <label><input type="radio" name="type_show" value="day" checked/>按日</label>
                        <label><input type="radio" name="type_show" value="week"/>按周</label>
                        <label><input type="radio" name="type_show" value="month"/>按月</label>
                    </div>
                </div>
                <div class="chart-box">
                    <!--图标插入位置-->
                    <canvas id="activeChart" style="width:100%;height:450px"></canvas>
                </div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
{/block}


